<template>
	<!-- 客群管理 -->
	<view class="home">
		<view class="head">
			<navigator class="goBack" open-type="navigateBack">
				<u-icon name="arrow-left" color="#444" size="28" style="margin-right: 10rpx;"></u-icon>
				客群管理
			</navigator>
		</view>
		<view class="Item" v-if="notMore">
			<view class="search">
				<view style="display: flex;align-items: center;justify-content: center; color: #ccc;width: 100%;height: 60rpx;"  v-if="!goSearch" @click="goSearch=true">
					<image src="/static/img/search.png" style="width: 35rpx; height: 35rpx;margin-right: 20rpx;" mode="aspectFit" />
					搜索
				</view>
				<u-input v-model="searchKeyWord" @blur="goSearch=false" v-if="goSearch" style="width: 80%;margin: auto;" placeholder="请输入关键词"  type="text" :border="false" />
			</view>
			
			<view class="title" style="margin-left: 20rpx;">
				<titleRow style="margin-left: 20rpx;" :titleName="titleName2"></titleRow>
				
			</view>
			<scroll-view  class="dataArr" scroll-y="true"  >
				<view class="dataItem" v-for="(item,index) in customersArr" :key="index">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="contentText">
						<view class="name">
							{{item.name}} <text>{{item.time}}</text>
						</view>
						<view class="des">
							{{item.des}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		
		<view class="Item"  v-if="!notMore">
			<view class="title">
				<titleRow style="margin-left: 20rpx;" :titleName="titleName1"></titleRow>
				
			</view>
			<view class="content">
				<image src="../../static/img/didNotCreate2.png" mode="aspectFill"></image>
				<text style="margin-top: 30rpx;"> 你还没有创建群聊哦~</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import titleRow from '@/component/titleRow/titleRow.vue'
	export default {
		data() {
			return {
				titleName1:'共0个群聊',
				titleName2:'共452个群聊',
				notMore:true,
				searchKeyWord:'',
				goSearch:false,
				customersArr:[
					{
						image:'/static/1.png',
						name:'这是个群聊名称',
						des:'这是个群聊天信息',
						time:'16:48',
					},
					{
						image:'/static/1.png',
						name:'这是个群聊名称',
						des:'这是个群聊天信息',
						time:'16:48',
					},
					{
						image:'/static/1.png',
						name:'这是个群聊名称',
						des:'这是个群聊天信息',
						time:'16:48',
					},
					{
						image:'/static/1.png',
						name:'这是个群聊名称',
						des:'这是个群聊天信息',
						time:'16:48',
					},
					{
							image:'/static/1.png',
							name:'这是个群聊名称',
							des:'这是个群聊天信息',
							time:'16:48',
						},
						{
							image:'/static/1.png',
							name:'这是个群聊名称',
							des:'这是个群聊天信息',
							time:'16:48',
						},
						{
							image:'/static/1.png',
							name:'这是个群聊名称',
							des:'这是个群聊天信息',
							time:'16:48',
						},
						{
							image:'/static/1.png',
							name:'这是个群聊名称',
							des:'这是个群聊天信息',
							time:'16:48',
						},
					{
							image:'/static/1.png',
							name:'这是个群聊名称',
							des:'这是个群聊天信息',
							time:'16:48',
						},
						{
							image:'/static/1.png',
							name:'这是个群聊名称',
							des:'这是个群聊天信息',
							time:'16:48',
						},
						{
							image:'/static/1.png',
							name:'这是个群聊名称',
							des:'这是个群聊天信息',
							time:'16:48',
						},
						{
							image:'/static/1.png',
							name:'这是个群聊名称',
							des:'这是个群聊天信息',
							time:'16:48',
						},
					
				],
			};
		},
		components:{
			titleRow
		},
		methods:{
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		 background-color: #f9f9f9;
		 
  		.head {
			  display: flex;
			  justify-content: space-between;
			  height: 90rpx;
			  align-items: center;
			  padding: 0 30rpx;
			  background-color: #fff;
    		.goBack {
				color: #444444;
    		}

    		.goNew {
				background: #0991FF;
				color: #fff;
				height: 60rpx;
				width: 120rpx;
				display: grid;
				place-items: center;
				border-radius: 4rpx;
    		}
  		}
		
		
  		.Item {
			// height: calc( 100vh - 180rpx) ;
			width: 100%;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			
    		.title {
				
				titlerow {
				}
    		}

			.dataArr {
				width: 100%;
				height: 73vh;
				.dataItem {
					display: flex;
					align-items: center;
					width: 100%;
					height: 109rpx;
					margin-bottom: 24rpx;
					image {
						height: 86rpx;
						width: 86rpx;
						margin-left: 30rpx;
					}
				
					.contentText {
						width: 75%;
						height: 100%;
						border-bottom: 1px solid #E5E5E5;
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						.name {
							font-size: 30rpx;
							font-weight: 600;
							position: relative;
							text {
								font-size: 26rpx;
								color: #888888;
								text-align: right;
								font-weight: 200;
								position: absolute;
								right: 0;
							}
						}
					
						.des {
							font-size: 26rpx;
							color: #888888;
						}
					}
				}
			}


			.search {
				height: 80rpx;
				// height: 5vh;
				background: #FFFFFF;
				box-shadow: 0px 1px 10px rgba(221, 221, 221, 0.5);
				border-radius: 28rpx;
				display: grid;
				place-items: center;
				margin: 0 20rpx 15rpx;
			}

    		.content {
				// background-color: #fff;
				flex: 1;
				display: flex;
				flex-direction:column;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				height: 100%;
				image {
					width: 352rpx;
					height: 219rpx;
				}
    		}
  		}
	}
</style>
